<template>
  <div class="question">
    <div class="form-wrap">
      <el-form
        ref="addForm"
        :inline="true"
        :model="dataForm"
        class="demo-form-inline"
      >
        <el-row>
          <el-form-item label="学科">
            <el-select v-model="dataForm.subject" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option
                v-for="item in subjectOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="阶段">
            <el-select v-model="dataForm.step" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="初级" value="1" />
              <el-option label="中级" value="2" />
              <el-option label="高级" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="企业">
            <el-select v-model="dataForm.enterprise" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option
                v-for="item in enterpriseOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="题型">
            <el-select v-model="dataForm.type" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="单选" value="1" />
              <el-option label="多选" value="2" />
              <el-option label="简答" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="dataForm.difficulty" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="简单" value="1" />
              <el-option label="一般" value="2" />
              <el-option label="困难" value="3" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="状态">
            <el-select v-model="dataForm.status" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="禁用" value="0" />
              <el-option label="启用" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="dataForm.create_date"
              :picker-options="pickerOptions"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="dataForm.username" placeholder="审批人" />
          </el-form-item>
          <el-form-item label="标题" class="item-title">
            <el-input v-model="dataForm.title" placeholder="审批人" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
            <el-button>清除</el-button>
          </el-form-item>
        </el-row>
        <el-row />
      </el-form>
    </div>
    <div class="table-wrap">
      <el-button
        type="primary"
        class="add-btn"
        @click="addHandle"
      >+新增试题</el-button>
      <el-table :data="list" stripe style="width: 100%">
        <el-table-column align="center" label="序号" width="80">
          <template v-slot="{ $index }">
            <div>
              {{ (dataForm.page - 1) * dataForm.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="题目">
          <template v-slot="{ row }"><span v-html="row.title" /></template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="subject_name"
          label="学科·阶段"
          width="180"
        >
          <template v-slot="{ row }"><div v-formatSubject="row" /></template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="题型" width="80">
          <template v-slot="{ row }">
            <span v-if="row.type === 1">单选</span>
            <span v-else-if="row.type === 2">多选</span>
            <span v-else-if="row.type === 3">简答</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="enterprise_name"
          label="企业"
          width="280"
        />
        <el-table-column
          align="center"
          prop="username"
          label="创建者"
          width="120"
        />
        <el-table-column align="center" prop="status" label="状态" width="80">
          <template v-slot="{ row }">
            <span v-if="row.status === 1">启用</span>
            <span v-else-if="row.status === 0" style="color: red">禁用</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="reads"
          label="访问量"
          width="80"
        />
        <el-table-column align="center" prop="status" label="操作" width="200">
          <template v-slot="{ row }">
            <el-button type="text" @click="editHandle(row)">编辑</el-button>
            <el-button
              v-if="row.status === 0"
              type="text"
              @click="statusHandle(row)"
            >启用</el-button>
            <el-button
              v-if="row.status === 1"
              type="text"
              @click="statusHandle(row)"
            >禁用</el-button>
            <el-button type="text" @click="delHandle(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page.sync="dataForm.page"
        :page-sizes="pagination.pageSizes"
        :page-size.sync="dataForm.limit"
        :layout="pagination.layout"
        :total="total"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>
    <add-or-update
      ref="addOrUpdate"
      :enterprise-options="deepCopy(enterpriseOptions)"
      :subject-options="deepCopy(subjectOptions)"
      @refresh="getData"
    />
  </div>
</template>

<script>
import addOrUpdate from './components/addOrUpdate.vue'
export default {
  directives: {
    formatSubject: {
      inserted(dom, obj) {
        const stepArr = { 1: '初级', 2: '中级', 3: '高级' }
        let step = '-'
        if ([1, 2, 3].includes(+obj.value.step)) {
          step = stepArr[+obj.value.step]
        }
        dom.innerText = `${obj.value.subject_name} · ${step}`
      },
      componentUpdated(dom, obj) {
        const stepArr = { 1: '初级', 2: '中级', 3: '高级' }
        let step = '-'
        if ([1, 2, 3].includes(+obj.value.step)) {
          step = stepArr[+obj.value.step]
        }
        dom.innerText = `${obj.value.subject_name} · ${step}`
      }
    }
  },
  components: {
    addOrUpdate
  },
  data() {
    return {
      dataForm: {
        title: '', // 	标题名称
        subject: '', // 	学科id
        enterprise: '', // 	企业id
        type: '', // 	题目类型:1(单选),2(多选),3(简答)
        step: '', // 	题目阶段:1(初级),2(中级),3(高级)
        username: '', // 	作者
        status: '', // 	状态:0(禁用),1(启用)
        difficulty: '', // 	题目难度: 1(简单),2(一般),3(困难)
        create_date: '', // 	创建日期
        page: 1, // 	页码 默认为1
        limit: +localStorage.getItem('pageSize') || 1 // 	页尺寸 默认为10
      },
      enterpriseOptions: [],
      subjectOptions: [],
      list: [],
      total: 0,
      pickerOptions: {
        disabledDate(time) {
          // 如果没有后面的-8.64e6就是不可以选择今天的
          return time.getTime() > Date.now() - 8.64e6
        }
      }
    }
  },
  created() {
    this.getData()
    this.initEnterpriseOptions()
    this.initSubjectOptions()
  },
  methods: {
    addHandle() {
      this.$refs.addOrUpdate.mode = 'add'
      this.$refs.addOrUpdate.visible = true
      this.$refs.addOrUpdate.formReset()
    },
    async initEnterpriseOptions() {
      const { data: enterprise } = await this.$api.enterprise.enterpriseList({
        limit: 9999
      })
      this.enterpriseOptions = enterprise.items.map((item) => ({
        id: item.id,
        name: item.name
      }))
    },
    async initSubjectOptions() {
      const { data: subject } = await this.$api.subject.subjectList({
        limit: 9999
      })
      this.subjectOptions = subject.items.map((item) => ({
        id: item.id,
        name: item.name
      }))
    },
    async getData() {
      const { data: questionRes } = await this.$api.question.questionList(
        this.dataForm
      )
      this.list = questionRes.items
      this.total = questionRes.pagination.total
    },
    statusHandle(row) {
      let msg = `确定要启用《${row.title}》这套试题吗?`
      if (row.status === 1) {
        msg = `确定要禁用《${row.title}》这套试题吗?`
      }
      this.$confirm(msg, '提示')
        .then(async() => {
          await this.$api.question.questionStatusPost({ id: row.id })
          this.$message.success('操作成功!')
          this.getData()
        })
        .catch(() => {})
    },
    delHandle(row) {
      this.$confirm(`确定要删除《${row.title}》这套试题吗?`, '提示')
        .then(async() => {
          await this.$api.question.questionRemovePost({ id: row.id })
          this.$message.success('操作成功!')
          this.getData()
        })
        .catch(() => {})
    },
    async editHandle(row) {
      const { data } = await this.$api.question.questionOnePost({ id: row.id })
      const selectOptions = data.options.map((item) => ({
        label: item.label,
        text: item.text,
        imgUrl: this.baseApi + item.image,
        image: item.image
      }))
      data.multiple_select_answer = data.multiple_select_answer.split(',')
      data.city = data.city.split(',')
      this.$refs.addOrUpdate.mode = 'edit'
      this.$refs.addOrUpdate.$refs.video.videoForm.showVideoPath =
        this.baseApi + data.video
      this.$refs.addOrUpdate.videoUrl = this.baseApi + data.video
      this.$refs.addOrUpdate.selectOptions = selectOptions
      this.$refs.addOrUpdate.dataForm = data
      this.$refs.addOrUpdate.visible = true
    },
    sizeChange(size) {
      localStorage.setItem('pageSize', size)
      this.getData()
    },
    currentChange() {
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.question {
  .form-wrap {
    ::v-deep .el-row {
      .el-form-item {
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        &.item-title .el-input,
        &.item-title .el-input.el-input__inner {
          width: 390px;
        }
      }
    }
    ::v-deep .el-input,
    ::v-deep .el-date-editor,
    ::v-deep .el-input.el-input__inner,
    ::v-deep .el-date-editor.el-input,
    ::v-deep .el-date-editor.el-input__inner {
      width: 250px;
    }
  }
  .table-wrap {
    margin-top: 20px;
    .el-button.add-btn {
      margin-bottom: 15px;
    }
  }

  ::v-deep .el-table {
    border: 1px solid #ccc;
    border-top: none;
    th {
      border-bottom: 1px solid #b3b3b3;
      border-top: 1px solid #b3b3b3;
      background: #f0f0f0;
    }
  }
}
</style>
